import React from "react";

const Index = () =>{
    const navigate = React.Router.useNavigate();
    const [SearchParams] = React.Router.useSearchParams();
    //搜索框的值
    const [value,setValue] = React.useState('');
    const [finished,setFineshed] = React.useState(false);
    const [list,setList] = React.useState([]);
    //显示数据的总数量
    const [listCount,setListCount] = React.useState(0);
    //显示数据的页数
    const [page,setPage] = React.useState(1);
    //显示10条数量
    const [limit,setLimit] = React.useState(10);
    const [action,setAction] = React.useState(SearchParams.get('action'));

    //返回参数
    const onSelected = (info) =>{
        // console.log(info);
        if(!info || JSON.stringify(info) === '{}'){
            React.Vant.Toast.info('请选择租赁的商品');
            return;
        }

        let data = {
            id:info.id,
            name:info.name,
            rent:info.rent,
            rent_price:info.rent_price
        }
        //把值存储到cookies里面
        React.Cookies.save('product',data,{path:'/'});

        navigate(-1);
    }

    //获取商品数据
    const getProductData = async (isRefresh) =>{
        let data = {
            page:isRefresh === true ? 1 :page,
            keyword:value,
            limit
        }

        let result = await React.Http.POST({
            url:'product/Product/index',
            params:data
        });

        if(result){
            if(result.code === 0){
                React.Vant.Toast.info(result.msg);
                setFineshed(true);
                return;
            }

            if(isRefresh === true)
            {
                list.length = 0;
                React.Vant.Toast.info('刷新成功');
            }

            let ListCount = result.data.count;
            setListCount(ListCount);

            setList((v) => {
                const newList = isRefresh === true ? [] : [...v,...result.data.list];

                return newList;
            });

            if(list.length>=ListCount){
                React.Vant.Toast.info(result.msg);
                //加载状态改成true
                setFineshed(true);
                return;
            }
            
            let Page = isRefresh === true ? 1 : page + 1;

            setPage(Page);
            setFineshed(false);

        }
    }

    const onLoadRefresh = (isRefresh) =>{
        setFineshed(true);
        getProductData(isRefresh);
    }
    //刷新的方法
    const onRefresh = () =>{
        setFineshed(false);

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                onLoadRefresh(true);

                resolve(true);
            },1500);
        })
    }
    //搜索框
    const onSearch = (value) =>
    {
        setValue(value);

        onRefresh();
    }

    

    const Item = () =>{
        if(list.length > 0)
        {
            if(action === 'lease')
            {
                return list.map(item => {
                    return (
                        <li key={item.id}>
                            <a onClick={() => onSelected(item)}>
                                <img src={item.cover_cdn} alt="" />
                                <p>{item.name}</p>
                                <span>￥{item.rent_price}</span>
                            </a>
                        </li>
                    )
                })
            }else{
                return list.map(item => {
                    return (
                        <li key={item.id}>
                            <React.Router.NavLink to={'/product/product/info?id=' + item.id}>
                                <img src={item.cover_cdn} alt="" />
                                <p>{item.name}</p>
                                <span>￥{item.rent_price}</span>
                            </React.Router.NavLink>
                        </li>
                    )
                })
            }
        }
    }

    const onBack = () =>{
        navigate(-1);
    }

    return (
        <>
            <React.Vant.Sticky>
                <React.Vant.NavBar
                    title="全部商品"
                    leftText="返回"
                    onClickLeft={onBack}
                />
            </React.Vant.Sticky>
            {/* 搜索框 */}
            <React.Vant.Search value={value} onSearch={onSearch} clearable placeholder="请输入搜索关键词" />

            <div className="left_kuangs">
                <React.Vant.PullRefresh onRefresh={onRefresh}>
                    {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                    <React.Vant.List finished={finished} onLoad={onLoadRefresh}>
                        <ul>
                            <Item />
                        </ul>
                    </React.Vant.List>
                </React.Vant.PullRefresh>
            </div>
        </>
    )
} 
export default Index;